<!--用户管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">用户管理</span>
  </div>
  <!-- 用户搜索卡片 -->
  <el-card style="margin: 10px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索" style="width: 270px;">
        <el-input placeholder="请输入用户名"
                  v-model="searchUserForm.userName"
                  @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="手机号" style="width: 270px;">
        <el-input placeholder="请输入手机号"
                  v-model="searchUserForm.phone"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户列表卡片 用户表格数据-->
  <el-card style="margin: 10px;">
    <el-table :data="userArr">
      <el-table-column label="编号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="昵称" prop="nickName" align="center"></el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
      <el-table-column label="账户" prop="userName" align="center"></el-table-column>
      <el-table-column label="注册时间" prop="regTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editUser(scope.row.id)" :disabled="scope.row.level==40">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
//定义变量控制弹窗是否出现
const dialogVisible = ref(false);

//定义数组来维护员工直属领导的数据
const leaderOptions = ref([
  {username:'AA',id:'101'},
  {username:'BB',id:'102'}
]);
//定义对象来保存用户查询的条件
const searchUserForm = ref({userName:'',phone:''});
//定义对象保存查询到的用户表格数据
const userArr = ref([]);
//定义加载用户列表的方法
const loadUser = ()=>{
  let data = qs.stringify(searchUserForm.value);
  //如果有查询条件,就根据条件查,没有条件默认查全部数据
  axios.get('http://localhost:8080/v1/user/select?'+data)
      .then((response)=>{//回调函数,处理响应数据
        if(response.data.code==2000){//后端返回的状态码是2000说明成功了
          userArr.value = response.data.data;//把请求回来的数据装到绑定表格的数组中
          console.log(userArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

//页面一加载完毕,立即执行
onMounted(()=>{
  loadUser();
})

//重置搜索
const resetSearch = ()=>{
  //清空之前的搜索内容
  searchUserForm.value = {};
  //重新加载所有的用户数据
  loadUser();
}

</script>

<style scoped>

</style>